<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color:deepskyblue ;
            /*指定动画名称*/
            animation-name: wyd;
            /*动画持续时长*/
            animation-duration: 3s;
            /*延迟时间*/
            animation-delay: 0.5s;
            /*设置动画方式*/
            animation-timing-function:linear;
            /*动画播放的次数
            值：
            infinite：无限播放
            */
            animation-iteration-count:1;
            /*
            动画的方向
            normal：从0%至100%
            reverse：从100%至0%
            alternate：从0%-100%-0%-100%，来回滚动
            alternate-reverse：从100%-0%-100%-0%，来回滚动
            设置alternate时 animation-iteration-count>1,只有一次就没有来回滚动
            */
            animation-direction: alternate-reverse;
            /*
            动画以外的状态（不发生动画的时候停在哪里）
            forwards：停止到最后一帧
            backwards：播放完后归位到第一帧
            */
            animation-fill-mode: backwards;
            /*动画的播放状态（暂停和播放）
            paused：暂停
            running：播放动画
            */
            animation-play-state: running;

        }
        /*定义动画名称*/
        @keyframes wyd{
            /*起始帧，第一帧*/
            from{
                /*0可以不写*/
                transform: translate(0);
                /*动画结束后，布局是黑色*/
                background-color: black;
            }
            /*结束帧,第二帧*/
            to{
              transform: translate(900px);
                /*到最后一帧布局是红色*/
                background-color: red;
                /*延迟时间*/
                animation-delay: 0.5s;
            }
        }

        .outer:hover .inner{
            /*鼠标悬浮时停止动画*/
            animation-play-state: paused;
        }
    </style>
</head>
<body>

</body>
<div class="outer">
    <div class="inner"></div>
</div>
</html>